Node.js的EJS（Embedded JavaScript），幫助我們在HTML中嵌入javascript，可以將動態的資料放進HTML再回傳給client。

首先安裝EJSnpm install ejs，

寫好ejs的網頁，可以只寫入HTML，但檔名需為ejs

試著結合expressc和ejsx來從server端做rendering事先寫好的網頁。

app.get('/', (req, res) => {
  res.render('index', { title: 'Home' });
});

app.get('/about', (req, res) => {
  res.render('about', { title: 'About' });
});

app.get('/blogs/create', (req, res) => {
  res.render('create', { title: 'Create a new blog' });
});

// 404 page
app.use((req, res) => {
  res.status(404).render('404', { title: '404' });
});

{ title: 'Home'}是我們從這個app.js傳遞給ejs的數據，所以只要更改這裡的title，

在Index.ejs寫上<%= title %>的地方，就會重新render上不同的字。

我們也可以在app.js的地方，讓整個blog資料當成ejs的參數，

app.get('/', (req, res) => {
  const blogs = [
    {title: 'Yoshi finds eggs', snippet: 'Lorem ipsum dolor sit amet consectetur'},
    {title: 'Mario finds stars', snippet: 'Lorem ipsum dolor sit amet consectetur'},
    {title: 'How to defeat bowser', snippet: 'Lorem ipsum dolor sit amet consectetur'},
  ];
  res.render('index', { title: 'Home', blogs });
});

這樣我們就能在index.ejs利用這個參數，例如這裡要display所有的blogs
，可以發現有使用ejs的條件句，都要用ejs標籤包起來。

   <% if (blogs.length > 0) { %>
      <% blogs.forEach(blog => { %>

        <h3 class="title"><%= blog.title %></h3>
        <p class="snippet"><%= blog.snippet %></p>

      <% }) %>
    <% } else { %>
      <p>There are no blogs to display...</p>
    <% } %>
    

參考資料

Net ninja